import React, { useState } from "react";
import { Layout, Input, Select, Card } from "antd";
import WorkerData from "./workerData"; // 包含家政工作者信息的数据文件

const { Content } = Layout;
const { Option } = Select;
const { Search } = Input;

const WorkPage = () => {
  const [searchValue, setSearchValue] = useState("");
  const [filterValue, setFilterValue] = useState("");

  const handleSearch = (value) => {
    setSearchValue(value);
  };

  const handleFilterChange = (value) => {
    setFilterValue(value);
  };

  // 根据搜索和筛选值过滤家政工作者数据
  const filteredWorkers = WorkerData.filter(
    (worker) =>
      worker.name.includes(searchValue) &&
      (filterValue === "" || worker.location.includes(filterValue))
      //使用includes()方法进行模糊查询,检索字符串中是否包含该内容
  );

  return (
    <div>
        <Search
          placeholder="搜索家政工作者"
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={handleSearch}
          style={{ marginTop:20 }}
        />
        <Select
          defaultValue=""
          style={{ width: 200,marginTop:20 }}
          onChange={handleFilterChange}
          placeholder="按地区筛选"
        >
          <Option value="">全部地区</Option>
          <Option value="深圳">深圳</Option>
          <Option value="福州">福州</Option>
          <Option value="上海">上海</Option>
          <Option value="宁波">宁波</Option>
          <Option value="西安">西安</Option>
          <Option value="厦门">厦门</Option>
          {/* 根据实际情况添加更多选项 */}
        </Select>
    
      <Content style={{ padding: "0 10px", marginTop: 24 }}>
        <div style={{ background: "#fff", minHeight: 280 }}>
          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between" }}>
            {filteredWorkers.map((worker, index) => (
              <Card
                key={index}
                title={worker.name}
                style={{ width: 400, marginBottom: 16 }}
              >
                <p>年龄: {worker.age}</p>
                <p>从业经验: {worker.experience}</p>
                <p>好评率: {worker.rating}</p>
                <p>地区: {worker.location}</p>
                {/* 根据需要添加更多工作者信息 */}
              </Card>
            ))}
          </div>
        </div>
      </Content>
     
      </div>
  );
};

export default WorkPage;
